<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item,index) in list" :key="index">
				<view class="py-4 px-3 flex align-center font text-muted" hover-class="bg-light" 
				@click="navigateTo('user-space','user_id='+item.user_id)">
				   <image :src="item.avatar" class="rounded-circle" mode="widthFix" style="width: 80rpx; height: 80rpx;"></image>
				   <text class="mr-auto ml-2">{{item.nickname||item.username}}</text>
				   <text class="iconfont iconjinru text-light-muted"></text>
				</view>
				<template v-slot:right>
					<view class="flex align-center justify-center" style="width: 180rpx; background-color: #DD524D;"
					@click="unfollow(item.user_id)">
						<text class="text-white font-sm">{{type==='fans'?'屏蔽他(她)':'取消关注'}}</text>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 上拉加载更多 -->
		<view class="flex align-center justify-center font text-secondary" 
		style="height: 50px;" hover-class="bg-light">{{nomore?'我是有底线的':'上滑加载更多'}}</view>
	</view>
</template>

<script>
	// 引入vuex的 mapState
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				page:1,
				nomore:false,//判断是否还有更多数据
				list:[],
				type:'follow',//此页面为【我关注的人】与【我的粉丝】(fans)公用的页面，通过type来区分
			}
		},
		computed:{
			...mapState({
				user: state => state.user
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.nomore = false;
			this.getData().finally(()=> {
				uni.stopPullDownRefresh();
			});
		},
		// 触底加载更多
		onReachBottom() {
			if(!this.nomore){
				this.page++;
				this.getData();
			}
		},
		onLoad(e) {
			if(e.type && e.type === 'fans'){
				this.type = e.type;
				uni.setNavigationBarTitle({
					title:'我的粉丝'
				})
			}
			this.getData(false);
		},
		methods: {
			getData(showToast=true){
				let url = (this.type === 'fans')?'/user/fans/':'/user/follows/';
				return this.$H.get(url+this.page,{token:true}).then(res=>{
					//console.log(res);
					if(res.length < 10){
						this.nomore = true
					}
					if(showToast){
						uni.showToast({
							title:'数据获取成功',
							icon:'none'
						});
					}
					if(this.page > 1){
						if(res.length > 0){
							this.list = [...this.list, ...res];
						} else {
							this.page--;
							if(showToast){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
							}
						}
					} else {
						this.list = res;
					}
				}).catch(err=>{
					console.log(JSON.stringify(err));
					if(this.page > 1){
						this.page--;
					}
				});
			},
			unfollow(user_id){
				uni.showModal({
					title:'确认取消对此人对关注吗？',
					success: (r) => {
						if(r.confirm){
							let url = ( this.type === 'fans' ) ? '/user/fan_drop' : '/user/unfollow';
							let options = ( this.type === 'fans' ) ? {fan_user_id:user_id} : {follow_user_id:user_id};
							//console.log('url=',url);
							this.$H.post(url,options,{token:true}).then(res=>{
								uni.showToast({
									title:res,
									icon:'none'
								})
								// 【特别注意】：删除数组中某一数据的方式
								for (let i = 0; i < this.list.length; i++) { 
									if (this.list[i].user_id === user_id){
										this.list.splice(i,1);
										break;
									} 
								} 
								this.list.pop(item);
							}).catch(err=>{
								uni.showToast({
									title:err,
									icon:'none'
								})
							})
						}
					}
				})
			},
			navigateTo(path,params){
				let url = '/pages/'+path+'/'+path
				if(params && params.length > 0){
					url += '?'+params
				}
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style></style>
